<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">

        单价: <input type="text" v-model.number='price'> <br> 数量: <input type="text" v-model.number='count'> <br>
        <!--过滤器-->
        总金额为: {{(price*count) | jia}}
        <!--监听器-->
        <!--{{zong}}-->
        <!--计算属性-->
        <!--{{jine}}-->

    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        // 计算总金额, 如果总金额大于0, 则在金额后面加上一个 '元' 字, 如10元, 如果总金额为0, 则只显示0
        var vm = new Vue({
            el: '#app',
            data: {
                price: '',
                count: '',
                // zong: ''
            },

            //过滤器
            filters: {
                jia(val) {
                    if (val > 0) {
                        return val + '元'
                    } else {
                        return val = 0
                    }
                }
            },

            //监听器
            // watch: {
            //     price() {
            //         this.zong = this.price * this.count
            //     },
            //     count() {
            //         this.zong = this.price * this.count
            //     },
            //     zong() {
            //         if (this.zong > 0) {
            //             this.zong += '元'
            //         }

            //     }
            // },

            //计算属性
            // computed: {
            //     jine() {
            //         this.zong = this.price * this.count
            //         if (this.zong > 0) {
            //             return this.zong += '元'
            //         }
            //     }
            // }
        });
    </script>
</body>

</html>